<template>
  <div>
       <div class="goTop" v-show="goTopShow" @click="goTop">
       </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollTop: "",
      goTopShow: false
    };
  },
  computed: {},
  watch: {},
  destroyed() {
    document.removeEventListener("scroll", this.handleScroll, true);
  },
  deactivated() {
    document.removeEventListener("scroll", this.handleScroll, true);
  },
  activated() {
    document.addEventListener("scroll", this.handleScroll, true);
  },
  mounted() {
    document.addEventListener("scroll", this.handleScroll, true);
  },
  created() {},
  methods: {
    handleScroll(e) {
      this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      if (this.scrollTop > 500) {
        this.goTopShow = true;
      } else {
        this.goTopShow = false;
      }
    },
    goTop() {
      var timer = null,_that = this;
      window.cancelAnimationFrame(timer);
      timer = window.requestAnimationFrame(function fn() {
        if (_that.scrollTop > 0) {
          _that.scrollTop -= 50;
          document.body.scrollTop = document.documentElement.scrollTop = _that.scrollTop;
          timer = window.requestAnimationFrame(fn);
        } else {
          window.cancelAnimationFrame(timer);
          _that.goTopShow = false;
        }
      });
    }
  }
};
</script>
<style scoped>
.goTop {
  position: fixed;
  right: 10px;
  bottom: 10px;
  height: 60px;
  width: 60px;
  background: url('../../../static/img/aeroBee.png') no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
</style>
